<template>
  <div class="cartcontrol"> 
	<!-- 减号 -->
	<transition name="fade"><!--减号和数字平移动画-->
	  	 <div class="cart-decrease " v-show="food.count>0" @click.stop.prevent="decreaseCart($event)">
	  	 		<span class="inner icon-remove_circle_outline"></span>
	  	 </div>
	</transition>

  	 <div class="cart-count" v-show="food.count>0">{{food.count}}</div>

  	 <!-- 加号 -->
  	 <div class="cart-add icon-add_circle" @click.stop.prevent="addCart"></div>

  </div>
</template>
<script>
import Vue from "vue"
export default {
  name: 'cartcontrol',
  props:{
  	food:Object
  },
  methods:{
  	addCart(event){
  		
  		if(!event._constructed){
			return;
		};
		//console.log("click")
  		if(!this.food.count){
  			//this.food.count = 1  给一个观测对象，添加一个不存在的值count时，直接复值不行
  			//他检测不到这个0属性新增的变化，我们需要使用Vue.set需要引用import Vue from "vue"
  			Vue.set(this.food,'count', 1)
  		}else{
  			this.food.count ++
  		}
  		//console.log( event.target)
  		//event.srcElement.outerHTML
  		//(购物小球)子组件通过$emit触发父组件goods.vue的方法increment
        this.$emit('increment', event.target);
  	},
  	decreaseCart(event){
  		if(!event._constructed){
			return;
		};
  		if(this.food.count){	
  			this.food.count --
  		}
  	}
  }

}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped >
// @import '../../common/stylus/mixin.styl'
	
.cartcontrol
	font-size 0
	.cart-decrease
		display inline-block
		padding:6px 
		&.fade-enter-active,&.fade-leave-active
			transition: all .3s ease 
		&.fade-enter, &.fade-leave-active
			opacity: 0
			transform translate3d(24px, 0, 0) rotate(180deg)
      	.inner
			display:inline-block
			line-height:24px
			font-size:24px
			color:rgb(0, 160, 220)
	.cart-count
		display inline-block
		font-size:10px
		vertical-align:5px
		width 12px
		padding-top 6px
		text-align center
		color:rgb(147, 153, 159)
	.cart-add	
		display inline-block
		padding:6px 
		font-size:24px	
		line-height:24px
		color:rgb(0, 160, 220)		
</style>
